$(function () {
  // Tab 栏切换
  $(".tabs a").on("click", function () {
    $(this).addClass("active").siblings().removeClass("active");
    $(".monitor .content")
      .eq($(this).index())
      .show()
      .siblings(".content")
      .hide();
  });
  // 找到 .marquee 克隆一份
  $(".marquee-view .marquee").each(function () {
    $(this).append($(this).children().clone());
  });

  // 立即执行函数pie饼状图
  (function () {
    var myecharts = echarts.init(document.querySelector(".pie"));
    var option = {
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)",
      },
      color: [
        "#006cff",
        "#60cda0",
        "#ed8884",
        "#ff9f7f",
        "#0096ff",
        "#9fe6b8",
        "#32c5e9",
        "#1d9dff",
      ],
      series: [
        {
          name: "点位统计",
          type: "pie",
          radius: ["10%", "70%"],
          center: ["50%", "50%"],
          roseType: "radius",
          label: {
            fnotSize: 10,
          },
          labelLine: {
            length: 6,
            length2: 8,
          },
          data: [
            { value: 20, name: "云南" },
            { value: 26, name: "北京" },
            { value: 24, name: "山东" },
            { value: 25, name: "河北" },
            { value: 20, name: "江苏" },
            { value: 25, name: "浙江" },
            { value: 30, name: "四川" },
            { value: 42, name: "湖北" },
          ],
        },
      ],
    };
    myecharts.setOption(option);
    // 监听浏览器缩放，图表对象调用缩放resize函数
    window.addEventListener("resize", function () {
      myecharts.resize();
    });
  })();

  // 柱狀圖
  (function () {
    var item = {
      name: "",
      value: 1200,
      // 柱子颜色
      itemStyle: {
        color: "#254065",
      },
      // 鼠标经过柱子颜色
      emphasis: {
        itemStyle: {
          color: "#254065",
        },
      },
      // 工具提示隐藏
      tooltip: {
        extraCssText: "opacity:0",
      },
    };
    var myecharts = echarts.init(document.querySelector(".bar"));
    var option = {
      color: new echarts.graphic.LinearGradient(
        // (x1,y2) 点到点 (x2,y2) 之间进行渐变
        0,
        0,
        0,
        1,
        [
          { offset: 0, color: "#00fffb" }, // 0 起始颜色
          { offset: 1, color: "#0061ce" }, // 1 结束颜色
        ]
      ),
      tooltip: {
        trigger: "item",
      },
      grid: {
        top: "3%",
        left: "0%",
        right: "3%",
        bottom: "3%",
        containLabel: true,
        show: true,
        borderColor: "rgba(0, 240, 255, 0.3)",
      },
      xAxis: [
        {
          type: "category",
          data: [
            "上海",
            "广州",
            "北京",
            "深圳",
            "合肥",
            "",
            "......",
            "",
            "杭州",
            "厦门",
            "济南",
            "成都",
            "重庆",
          ],
          axisTick: {
            // 让下轴的文字与柱体   对齐
            alignWithLabel: false,
            // 隐藏刻度
            show: false,
          },
          // 修改x轴文字颜色
          axisLabel: {
            color: "#4c9bfd",
          },
          // 修改x轴线的颜色
          axisLine: {
            lineStyle: {
              color: "rgba(0, 240, 255, 0.3)",
            },
          },
        },
      ],
      yAxis: [
        {
          // 使用类目，必须有data属性
          type: "value",
          // 使用 data 中的数据设为刻度文字
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          // 刻度设置
          axisTick: {
            // 不显示刻度
            show: false,
          },
          // y坐标轴文字标签样式设置
          axisLabel: {
            color: "#4c9bfd",
          },
          // y坐标轴颜色设置
          axisLine: {
            lineStyle: {
              color: "rgba(0, 240, 255, 0.3)",
              // width:8,  x轴线的粗细
              // opcity: 0,   如果不想显示x轴线 则改为 0
            },
          },
          // y轴 分割线的样式
          splitLine: {
            lineStyle: {
              color: "rgba(0, 240, 255, 0.3)",
            },
          },
        },
      ],
      series: [
        {
          name: "直接访问",
          type: "bar",
          barWidth: "60%",
          data: [
            2100,
            1900,
            1700,
            1560,
            1400,
            item,
            item,
            item,
            900,
            750,
            600,
            480,
            240,
          ],
        },
      ],
    };
    myecharts.setOption(option);
    // 4. 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function () {
      console.log(1);
      // 让我们的图表调用 resize这个方法
      myecharts.resize();
    });
  })();

  // 折現變化圖
  (function () {
    var data = {
      year: [
        [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
        [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
      ],
      quarter: [
        [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
        [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34],
      ],
      month: [
        [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
        [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98],
      ],
      week: [
        [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
        [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24],
      ],
    };
    var myecharts = echarts.init(document.querySelector(".line"));
    var option = {
      tooltip: {
        trigger: "axis",
      },
      legend: {
        textStyle: {
          color: "#4c9bfd",
        },
        right: "10%",
        data: ["预期销售额", "实际销售额"],
      },
      grid: {
        top: "20%",
        left: "3%",
        right: "4%",
        bottom: "3%",
        show: true,
        borderColor: "#012f4a",
        containLabel: true,
      },

      xAxis: {
        type: "category",
        boundaryGap: false,
        data: [
          "一月",
          "二月",
          "三月",
          "四月",
          "五月",
          "六月",
          "七月",
          "八月",
          "九月",
          "十月",
          "十一月",
          "十二月",
        ],
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: "#4c9bfd",
        },
        axisLine: {
          show: false,
        },
      },
      yAxis: {
        type: "value",
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: "#4c9bfd",
        },
        splitLine: {
          lineStyle: {
            color: "#012f4a",
          },
        },
      },
      series: [
        {
          name: "预期销售额",
          type: "line",
          stack: "总量",
          smooth: true,
          data: data.year[0],
        },
        {
          name: "实际销售额",
          type: "line",
          stack: "总量",
          smooth: true,
          data: data.year[1],
        },
      ],
    };
    //  把配置和数据给实例对象
    myecharts.setOption(option);
    $(".sales").on("click", ".caption a", function () {
      index = $(this).index() - 1;
      $(this).addClass("active").siblings("a").removeClass("active");
      var currData = data[this.dataset.type];
      option.series[0].data = currData[0];
      option.series[1].data = currData[1];
      myecharts.setOption(option);
    });
    var as = $(".sales .caption a");
    var index = 0;
    var timer = setInterval(function () {
      index++;
      if (index >= as.length) index = 0;
      as.eq(index).click();
    }, 1200);
    $(".sales").hover(
      function () {
        clearInterval(timer);
      },
      function () {
        clearInterval(timer);
        timer = setInterval(function () {
          index++;
          if (index >= as.length) index = 0;
          as.eq(index).click();
        }, 1200);
      }
    );
    // 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function () {
      console.log(1);
      // 让我们的图表调用 resize这个方法
      myecharts.resize();
    });
  })();

  // 销售渠道模块 雷达图
  (function () {
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".radar"));
    // 2.指定配置

    var option = {
      tooltip: {
        show: true,
        // 控制提示框组件的显示位置
        position: ["60%", "10%"],
      },
      radar: {
        indicator: [
          { name: "机场", max: 100 },
          { name: "商场", max: 100 },
          { name: "火车站", max: 100 },
          { name: "汽车站", max: 100 },
          { name: "地铁", max: 100 },
        ],
        // 修改雷达图的大小
        radius: "65%",
        shape: "circle",
        // 分割的圆圈个数
        splitNumber: 4,
        name: {
          // 修饰雷达图文字的颜色
          textStyle: {
            color: "#4c9bfd",
          },
        },
        // 分割的圆圈线条的样式
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255, 0.5)",
          },
        },
        splitArea: {
          show: false,
        },
        // 坐标轴的线修改为白色半透明
        axisLine: {
          lineStyle: {
            color: "rgba(255, 255, 255, 0.5)",
          },
        },
      },
      series: [
        {
          name: "北京",
          type: "radar",
          // 填充区域的线条颜色
          lineStyle: {
            normal: {
              color: "#fff",
              width: 1,
              opacity: 0.5,
            },
          },
          data: [[90, 19, 56, 11, 34]],
          // 设置图形标记 （拐点）
          symbol: "circle",
          // 这个是设置小圆点大小
          symbolSize: 5,
          // 设置小圆点颜色
          itemStyle: {
            color: "#fff",
          },
          // 让小圆点显示数据
          label: {
            show: true,
            fontSize: 10,
          },
          // 修饰我们区域填充的背景颜色
          areaStyle: {
            color: "rgba(238, 197, 102, 0.6)",
          },
        },
      ],
    };
    // 3.把配置和数据给对象
    myChart.setOption(option);
    // 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function () {
      // 让我们的图表调用 resize这个方法
      myChart.resize();
    });
  })();

  // 销售模块 饼形图 半圆形 设置方式
  (function () {
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".gauge"));
    // 2. 指定数据和配置
    var option = {
      series: [
        {
          name: "销售进度",
          type: "pie",
          radius: ["130%", "150%"],
          // 移动下位置  套住50%文字
          center: ["48%", "80%"],
          //是否启用防止标签重叠策略
          // avoidLabelOverlap: false,
          startAngle: 180,
          labelLine: {
            normal: {
              show: false,
            },
          },
          hoverOffset: 0,
          data: [
            {
              value: 100,
              itemStyle: {
                // 颜色渐变#00c9e0->#005fc1
                color: new echarts.graphic.LinearGradient(
                  // (x1,y2) 点到点 (x2,y2) 之间进行渐变
                  0,
                  0,
                  0,
                  1,
                  [
                    { offset: 0, color: "#00c9e0" }, // 0 起始颜色
                    { offset: 1, color: "#005fc1" }, // 1 结束颜色
                  ]
                ),
              },
            },
            { value: 100, itemStyle: { color: "#12274d" } },
            { value: 200, itemStyle: { color: "transparent" } },
          ],
        },
      ],
    };
    // 3. 把数据和配置给实例对象
    myChart.setOption(option);
    // 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function () {
      // 让我们的图表调用 resize这个方法
      myChart.resize();
    });
  })();

  (function () {
    // 声明一个带有数据的数组
    var hotData = [
      {
        city: "北京", // 城市
        sales: "25, 179", // 销售额
        flag: true, //  上升还是下降
        brands: [
          //  品牌种类数据
          { name: "可爱多", num: "9,086", flag: true },
          { name: "娃哈哈", num: "8,341", flag: true },
          { name: "喜之郎", num: "7,407", flag: false },
          { name: "八喜", num: "6,080", flag: false },
          { name: "小洋人", num: "6,724", flag: false },
          { name: "好多鱼", num: "2,170", flag: true },
        ],
      },
      {
        city: "河北",
        sales: "23,252",
        flag: false,
        brands: [
          { name: "可爱多", num: "3,457", flag: false },
          { name: "娃哈哈", num: "2,124", flag: true },
          { name: "喜之郎", num: "8,907", flag: false },
          { name: "八喜", num: "6,080", flag: true },
          { name: "小洋人", num: "1,724", flag: false },
          { name: "好多鱼", num: "1,170", flag: false },
        ],
      },
      {
        city: "上海",
        sales: "20,760",
        flag: true,
        brands: [
          { name: "可爱多", num: "2,345", flag: true },
          { name: "娃哈哈", num: "7,109", flag: true },
          { name: "喜之郎", num: "3,701", flag: false },
          { name: "八喜", num: "6,080", flag: false },
          { name: "小洋人", num: "2,724", flag: false },
          { name: "好多鱼", num: "2,998", flag: true },
        ],
      },
      {
        city: "江苏",
        sales: "23,252",
        flag: false,
        brands: [
          { name: "可爱多", num: "2,156", flag: false },
          { name: "娃哈哈", num: "2,456", flag: true },
          { name: "喜之郎", num: "9,737", flag: true },
          { name: "八喜", num: "2,080", flag: true },
          { name: "小洋人", num: "8,724", flag: true },
          { name: "好多鱼", num: "1,770", flag: false },
        ],
      },
      {
        city: "山东",
        sales: "20,760",
        flag: true,
        brands: [
          { name: "可爱多", num: "9,567", flag: true },
          { name: "娃哈哈", num: "2,345", flag: false },
          { name: "喜之郎", num: "9,037", flag: false },
          { name: "八喜", num: "1,080", flag: true },
          { name: "小洋人", num: "4,724", flag: false },
          { name: "好多鱼", num: "9,999", flag: true },
        ],
      },
    ];
    // 声明一个 空数组用来储存数据
    var top = [];
    // 遍历hotData 这个数组
    $.each(hotData, function (index, items) {
      //  然后将数组里面的数组追加到 这个空数组里面
      top.push(`
      <li>
        <span>${items.city}</span>
        <span>${
          items.sales
        }<s class="${items.flag ? "icon-up" : "icon-down"}"></s></span>
        </li>
      `);
      // 将数组里面的内容   渲染到盒子内  join将数组转换为字符串  split 把字符串分割成数组
      $(".province .sup").html(top.join(""));
    });

    // $(".province .sup").on("mouseenter", "li", function (e) {
    //   e.stopPropagation();
    //   $(this).addClass("active").siblings().removeClass("active");
    //   var sta = [];
    //   $.each(hotData[$(this).index()].brands, function (index, items) {
    //     sta.push(`
    //   <li><span>${
    //     items.name
    //   }</span>${items.num}<span> <s class="${items.flag ? "icon-up" : "icon-down"}"></s></span></li>
    //   `);
    //   });

    //   $(".province .sub").html(sta.join(""));
    // });
    // // 所有的LI
    // var lis = $(".province .sup li");
    // // 第一个默认激活
    // lis.eq(0).mouseenter();

    // var index = 0;
    // var timer = setInterval(function () {
    //   index++;
    //   if (index >= hotData.length) index = 0;
    //   lis.eq(index).mouseenter();
    // }, 1500);

    // $(".province").parent().hover(
    //   function () {
    //     clearInterval(timer);
    //   },
    //   function () {
    //     // clearInterval(tiemr)
    //     timer = setInterval(function () {
    //       index++;
    //       if (index >= hotData.length) index = 0;
    //       lis.eq(index).mouseenter();
    //     }, 1500);
    //   }
    // );
    var lis = document.querySelectorAll(".province .sup li");
    for (var i = 0; i < lis.length; i++) {
      lis[i].onmouseenter = function () {
        index = $(this).index();
        $(this).addClass("active").siblings().removeClass();
        var sta = [];
        var arr = hotData[index].brands;
        for (var i = 0; i < arr.length; i++) {
          sta.push(`
          <li>
              <span>${arr[i].name}</span>
              <span>${arr[i].num}<s class="${
            arr[i].flag ? "icon-up" : "icon-down"
          }"></s></span>
          </li>
          `);
        }
        $(".sub").html(sta.join(""));
      };
    }
    lis[0].onmouseenter();
    var timer = setInterval(function () {
      index++;
      if (index >= hotData.length) index = 0;
      lis[index].onmouseenter();
    }, 1200);
    $(".province .sup")[0].onmouseenter = function () {
      clearInterval(timer);
    };
    console.log($(".province .sup")[0]);
    $(".province .sup")[0].onmouseleave = function () {
      clearInterval(timer);
      timer = setInterval(function () {
        index++;
        if (index >= hotData.length) index = 0;
        lis[index].onmouseenter();
      }, 1200);
    };
  })();
  // 当我们浏览器缩放的时候，图表也等比例缩放
  window.addEventListener("resize", function () {
    // 让我们的图表调用 resize这个方法
    myChart.resize();
  })();
});
